<template>
  <div class="app-container">
    <!-- 表单 -->
    <form-data />
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      :row-class-name="tableRowClassName"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#eff1f7' }"
    >
      <el-table-column type="index" label="序号" width="55" align="center"> </el-table-column>
      <el-table-column prop="name" label="物品类型" width="80" align="center"></el-table-column>

      <el-table-column prop="name" label="文书编号" width="80" align="center"></el-table-column>
      <el-table-column label="当事人" width="80" align="center">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="address" label="办案单位" width="180" align="center"> </el-table-column>

      <el-table-column prop="name" label="物品名称" width="120" align="center"> </el-table-column>
      <el-table-column prop="name" label="数量" width="50" align="center"></el-table-column>
      <el-table-column prop="name" label="型号/证号/发动机号" width="150" align="center">
      </el-table-column>
      <el-table-column prop="name" label="生产日期/批号/车架号" align="center"> </el-table-column>

      <el-table-column prop="name" label="备注" width="80" align="center"> </el-table-column>
      <el-table-column prop="name" label="盘存时间" width="100" align="center"> </el-table-column>
      <el-table-column prop="" label="操作" width="120px" align="center">
        <template>
          <el-link type="primary" :underline="false">修改</el-link>
          <el-link type="primary" :underline="false" style="margin: 0.625rem"
            >详情</el-link
          ></template
        >
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- 分页 -->
    <el-row type="flex" justify="end" style="background: #eef1f7; padding: 5px 20px">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, prev, pager, next,sizes,jumper"
        :total="400"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import formData from './components/form-data.vue'
export default {
  components: { formData },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      formInline: {
        user: '',
        phone: '',
        units: '',
        number: '',
        name: '',
        date: '',
        receiver: ''
      },
      form: {
        announcementTime: '',
        expirationTime: '',
        linkman: '',
        information: '',
        picture: ''
      },
      dialogTableVisible: false,
      activeName: 'first',
      formLabelWidth: '130px',
      fit: '',
      radio: '1',
      currentPage1: 5
    }
  },
  methods: {
    handleClick() {},   
    submitForm(activeName) {},
    resetForm(activeName) {
      this.$refs[activeName].resetFields()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex)
      if (rowIndex % 2 != 0) {
        return 'warning-row'
      }
      return ''
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  background: #eff1f7;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-pagination {
  ::v-deep .btn-prev {
    background: none;
  }
  ::v-deep .btn-next {
    background: none;
  }
  ::v-deep .el-pager li {
    background: none;
  }
}
</style>